<template>
  <div>
    <el-card shadow="hover" style="margin-bottom: 20px">
      <div class="flex-warp">
                <div class="flex-warp-item">
          <div class="flex-warp-item-box">
            <el-input placeholder="请输入学生姓名"
                      size="small"
                      suffix-icon="el-icon-search"
                      v-model="listQueryParam.name">
            </el-input>
          </div>
        </div>
        <div class="flex-warp-item">
          <div class="flex-warp-item-box">
            <el-button size="small"
                       icon="el-icon-search"
                       @click="search">搜索 </el-button>
          </div>
        </div>

        <div class="flex-warp-item">
          <div class="flex-warp-item-box">
            <el-button type="primary"
                       size="small"
                       icon="el-icon-refresh-right"
                       @click="refresh">刷新 </el-button>
          </div>
        </div>

        <div class="flex-warp-item">
          <div class="flex-warp-item-box">
            <el-button type="success"
                       size="small"
                       icon="el-icon-plus"
                       @click="add">添加 </el-button>
          </div>
        </div>

        <div class="flex-warp-item">
          <div class="flex-warp-item-box">
            <el-button type="danger"
                       size="small"
                       icon="el-icon-folder-delete"
                       @click="batchDel">删除 </el-button>
          </div>
        </div>
      </div>
    </el-card>
    <el-card shadow="hover"
             class="mt15">
      <el-table :data="tableData"
                stripe
                ref="multipleTable"
                @selection-change="handleSelectionChange"
                style="width: 100%">
        <el-table-column type="selection"
                         width="55">
        </el-table-column>
        <!-- <el-table-column prop="id"
                         align="center"
                         label="学生编号">
        </el-table-column> -->
        <el-table-column prop="name"
                         align="center"
                         label="学生姓名">
        </el-table-column>
        <el-table-column prop="avatar"
                         align="center" width="80"
                         label="照片">
          <template slot-scope="scope">
            <ImgPreview :src="scope.row.avatar"></ImgPreview>
          </template>
        </el-table-column>
        <el-table-column prop="sex"
                         align="center"
                         label="性别">
          <template slot-scope="scope">
                 <span v-if="scope.row.sex == '0'">男</span>
                 <span v-if="scope.row.sex == '1'">女</span>
          </template>
        </el-table-column>
        <el-table-column prop="age"
                         align="center"
                         label="年龄">
        </el-table-column>
        <el-table-column prop="info"
                         align="center"
                         label="详细信息">
          <template slot-scope="{row}">
            <el-popover
                    placement="right"
                    width="400"
                    trigger="click">
              <span>{{row.info}}</span>
              <el-button slot="reference" size="mini">点击预览</el-button>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="username"
                         align="center"
                         label="学生账号">
        </el-table-column>
        <el-table-column prop="password"
                         align="center"
                         label="学生密码">
        </el-table-column>
        <!-- <el-table-column prop="createTime"
                         align="center"
                         label="创建时间">
        </el-table-column> -->
        <el-table-column fixed="right"
                         align="center"
                         label="操作">
          <template slot-scope="scope">
            <el-button @click="updateClick(scope.row)"
                       type="success"
                       icon="el-icon-edit"
                       size="small">编辑</el-button>
            <el-button type="danger"
                       size="small"
                       icon="el-icon-delete" 
                       @click="delClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0"
                  :total="total"
                  :page.sync="listQueryParam.current"
                  :limit.sync="listQueryParam.pageSize"
                  @pagination="getTableDataList" />
    </el-card>
    <!-- 添加或修改对话框 -->
    <el-dialog :title="dialogTitle"
               :visible.sync="addOrUpdateDialogVisible"
               width="40%"
               :before-close="handleClose">
      <el-form :model="formData"
               :rules="rules"
               ref="formData"
               label-width="100px">
          <el-form-item label="学生姓名"
                        prop="name">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
          <el-form-item label="照片"
                        prop="avatar">
            <uploadImg v-model="formData.avatar"></uploadImg>
          </el-form-item>
          <el-form-item label="性别"
                        prop="sex">
            <el-radio-group v-model='formData.sex'>
              <el-radio :label="0">男</el-radio>
              <el-radio :label="1">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="年龄"
                        prop="age">
            <el-input v-model="formData.age"></el-input>
          </el-form-item>
          <el-form-item label="详细信息"
                        prop="info">
            <el-input v-model="formData.info"></el-input>
          </el-form-item>
          <el-form-item label="学生账号"
                        prop="username">
            <el-input v-model="formData.username"></el-input>
          </el-form-item>
          <el-form-item label="学生密码"
                        prop="password">
            <el-input v-model="formData.password"></el-input>
          </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="addOrUpdateDialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitForm('formData')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getList, insert, update, get, del} from '@/api/Student/index'
import Pagination from '@/components/Pagination'
import { tableUtil } from '@/mixins/table';
import { Message } from 'element-ui';
import uploadImg from '@/components/ImageUpload'
import ImgPreview from '@/components/ImgPreview'
export default {
  mixins: [tableUtil],
  components: {
    Pagination, uploadImg, ImgPreview
  },
  data () {
    return {
      listQueryParam: {
        current: 1,
        pageSize: 5,
      },
      formData: {},
      rules: {
          username: [
              { required: true, message: '请输入学生账号', trigger: 'blur' }
          ],
          password: [
              { required: true, message: '请输入学生密码', trigger: 'blur' }
          ],
          name: [
              { required: true, message: '请输入学生姓名', trigger: 'blur' }
          ],
          sex: [
              { required: true, message: '请选择性别', trigger: 'change' }
          ],
          age: [
              { required: true, message: '请输入年龄', trigger: 'blur' }
          ],
          info: [
              { required: true, message: '请输入详细信息', trigger: 'blur' }
          ],
          avatar: [
              { required: true, message: '请上传照片', trigger: 'change' }
          ]
      }    };
  },
  mounted () {
    this.getTableDataList()
  },
  methods: {
    getTableDataList () {
      getList(this.listQueryParam).then((res) => {
        this.total = res.data.total;
        this.tableData = res.data.records;
      });
    },
    updateClick (row) {
      this.dialogTitle = '修改';
      get(row.id).then((res) => {
        this.formData = res.data;
        this.addOrUpdateDialogVisible = true;
      });
    },
    delByIds (ids) {
      del(ids).then((res) => {
        Message.success('删除成功');
        this.getTableDataList();
      });
    },
    saveData () {
      if (this.formData.id) {
        update(this.formData).then((res) => {
          Message.success('修改成功');
          this.addOrUpdateDialogVisible = false;
          this.getTableDataList();
        });
      } else {
        insert(this.formData).then((res) => {
          Message.success('添加成功');
          this.addOrUpdateDialogVisible = false;
          this.getTableDataList();
        });
      }
    }  },
};
</script>
